'use strict';
import {
    StyleSheet,
    View,
    Navigator,
    Text,
    TouchableOpacity,
    TouchableHighlight,
    AsyncStorage,
    AlertIOS,
} from 'react-native';
import React from 'react';
import URL from '../config/server';
import {Utils} from '../config/utils';
import tcomb from  'tcomb-form-native';
import Icon from 'react-native-vector-icons/Ionicons';
var Form = tcomb.form.Form;


var checkQQ = tcomb.refinement(tcomb.String, function (value) {
    var Reg = /^\d{5,10}$/;
    return Reg.test(value);
});

var QQ = tcomb.struct({
    qq: checkQQ
});

var NavigationBarRouteMapper = {
    LeftButton(route, navigator, index, navState) {
        return (
            <TouchableOpacity style={{flex: 1, justifyContent: 'center'}}
                              onPress={() => navigator.parentNavigator.pop()}>
                <View style={{flexDirection:'row',padding:5}}>
                    <Icon name="ios-arrow-back" size={18} color="#ffffff" style={{alignSelf:'center'}}/>
                    <Text style={{color: 'white', margin: 3,fontSize:16}}>
                        返回
                    </Text>
                </View>
            </TouchableOpacity>
        );
    },
    RightButton(route, navigator, index, navState) {
        return null;
    },
    Title(route, navigator, index, navState) {
        return (
            <TouchableOpacity style={{flex: 1, justifyContent: 'center'}}>
                <Text style={{color: 'white', margin: 10, fontSize: 20}}>
                    QQ注册
                </Text>
            </TouchableOpacity>
        );
    }
};

export default class RegMail extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            value: {
                qq:''
            },
            options: {
                auto: 'placeholders',
                fields: {
                    qq: {
                        placeholder: '请输入正确的QQ号',
                        error: 'QQ号格式不正确！'
                    }
                }
            },
            isSubmit:false
        }
    }

    isExist(qq) {
        var CHECK_QQ = URL.checkQQ + this.state.value.qq + '0';
        console.log(CHECK_QQ);
        var that = this;
        Utils.post(CHECK_QQ,'',function (data) {
            if (data) {
                that.getCode(qq)
            }else {
                AlertIOS.alert(
                    '温馨提示',
                    '已注册QQ号'
                )
            }
        })
    }

    getCode(qq){
        this.setState({
            isSubmit:true
        })
        var that = this;
        var GET_CODE=URL.local+'checkcode/qq/'+qq+'/';
        Utils.get(GET_CODE, function (data) {
            console.log(data);
            if(data){
                that.props.navigator.push({
                    id: 'RegQQ2',
                    message:that.state.value.qq
                })
            }else{
                that.setState({
                    isSubmit:false
                })
            }
        })
    }

    onPress() {
        var value = this.refs.main.refs.form.getValue();
        if (value) {
            this.setState({
                value: value
            });
            this.isExist(value.qq);
        }
    }

    renderScene(route, navigator) {
        return (
            <View style={styles.container}>
                <Form
                    ref='form'
                    type={QQ}
                    options={this.state.options}
                    value={this.state.value}
                />
                <TouchableHighlight style={this.state.isSubmit?styles.forbButton:styles.button} onPress={this.state.isSubmit?()=>console.log('forbid'):this.onPress.bind(this)} underlayColor='#e02820'>
                    <Text style={styles.buttonText}>{this.state.isSubmit?"跳转中..":"下一步"}</Text>
                </TouchableHighlight>
                <Text style={styles.h1}>
                    温馨提示:
                </Text>
                <Text style={styles.p}>验证码将以邮件的形式发送到您的QQ邮箱内,如果没有收到验证码，请检查垃圾箱。</Text>
            </View>
        );
    }


    render() {
        return (
            <Navigator
                ref='main'
                renderScene={this.renderScene.bind(this)}
                navigator={this.props.navigator}
                navigationBar={
            <Navigator.NavigationBar
                ref='main'
                style={{backgroundColor: '#e02820', alignItems: 'center'}}
                routeMapper={NavigationBarRouteMapper} />
          	}/>
        );
    }
}


const styles = StyleSheet.create({
    container: {
        marginTop: 100,
        justifyContent: 'center',
        padding: 20,
        backgroundColor: '#ffffff'
    },
    logo: {
        flex: 1,
        alignSelf: 'center',
        marginTop: 20
    },
    title: {
        fontSize: 25,
        alignSelf: 'center',
        marginBottom: 15,
        marginTop: 15
    },
    buttonText: {
        fontSize: 18,
        color: 'white',
        alignSelf: 'center'
    },
    button: {
        height: 36,
        backgroundColor: '#e02820',
        borderColor: '#e02820',
        borderWidth: 1,
        borderRadius: 8,
        marginBottom: 10,
        alignSelf: 'stretch',
        justifyContent: 'center'
    },
    findPwdText: {
        fontSize: 15,
        textDecorationLine: 'underline',
        textAlign: 'right'
    },
    h1: {
        fontSize: 17,
        marginLeft: 10,
        color: '#e02820'
    },
    p: {
        fontSize: 14,
        textAlign:'justify',
        paddingLeft: 10,
        paddingRight: 10,
        lineHeight: 20,
        color: "#e02820"
    },
    forbButton:{
        height: 36,
        backgroundColor: '#333333',
        borderColor: '#333333',
        borderWidth: 1,
        borderRadius: 8,
        marginBottom: 10,
        alignSelf: 'stretch',
        justifyContent: 'center'
    }
});

